import React, { memo, useMemo } from "react";
import styles from "../index.module.scss";
import PersonalDetail from "./personalDetail/index";
import ContentItem from "./contentItem";
import ScrollWrapper from "@/app/components/ScrollWrapper";
import { getDisplayName } from "@/app/utils";
import { useCommonStore } from "@/src/providers/common-store-provider";
import { useContentStore } from "@/src/providers/content-store-provider";
import { useCustomizationStore } from "@/src/providers/customization-store-provider";
import { totalContent } from "../main";
import { useRouter, useSearchParams } from "next/navigation";

function Index() {
  const router = useRouter();
  const params = useSearchParams();
  const { setCurrentTab, currentTab, setIndex, isMobile } = useCommonStore(
    (state) => state,
    (o, n) => {
      return o.currentTab === n.currentTab;
    }
  );
  const { content } = useContentStore(
    (state) => state,
    (o, n) => {
      return currentTab !== "content";
    }
  );

  const { customization } = useCustomizationStore(
    (state) => state,
    (o, n) => {
      return (
        currentTab !== "content" &&
        o.customization.layout.detailsPosition ===
          n.customization.layout.detailsPosition &&
        o.customization.layout.colsFromDetails ===
          n.customization.layout.colsFromDetails &&
        o.customization.sectionOrder === n.customization.sectionOrder
      );
    }
  );
  const { layout, sectionOrder } = customization;
  const { colsFromDetails, detailsPosition } = layout;

  const { leftSectionChildren, rightSectionChildren } =
    sectionOrder[colsFromDetails[detailsPosition || "top"]];
  function sortContent(content: ResumesContent) {
    const arr: Sections[] = [];
    let list = [];
    if (detailsPosition === "right") {
      list = leftSectionChildren.concat(rightSectionChildren || []);
    } else {
      list = (rightSectionChildren || []).concat(leftSectionChildren || []);
    }
    const keys = Object.keys(content);
    list.forEach((item) => {
      if (content[item]) {
        arr.push(item);
      }
    });
    return [...new Set([...arr, ...keys])];
  }

  const contentList = totalContent.filter((item) => !content[item]);

  const onEdit = (type) => {
    if (isMobile) {
      let path = "/content/edit?type=" + type;
      let id = params.get("id");
      let mid = params.get("mid");
      if (id) {
        path += "&id=" + id;
      }
      if (mid) {
        path += "&mid=" + mid;
      }
      router.push(path);
    } else {
      setCurrentTab(`${type}Edit`);
      setIndex(0);
    }
  };

  const renderContent = useMemo(() => {
    return contentList.map((item) => {
      return (
        <div
          className={styles.toBeAddItem}
          onClick={() => {
            onEdit(item);
            // setCurrentTab(`${item}Edit`);
            // setIndex(0);
          }}
          key={item}
        >
          {getDisplayName(item)}
          <button className={styles.plus}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width={20}
              viewBox="0 0 19 19"
              fill="currentColor"
            >
              <path
                fillRule="evenodd"
                d="M10.8 2.452a1.3 1.3 0 10-2.6 0v5.316H2.885a1.3 1.3 0 000 2.6H8.2v5.315a1.3 1.3 0 002.6 0v-5.315h5.315a1.3 1.3 0 100-2.6H10.8V2.452z"
                clipRule="evenodd"
              ></path>
            </svg>
          </button>
        </div>
      );
    });
  }, [currentTab]);
  const renderChild = (scrollWrapper?) => {
    return (
      <>
        {/* <MyResumes /> */}
        <PersonalDetail />
        {sortContent(content).map((item: Sections) => {
          return (
            <ContentItem
              scrollWrapper={scrollWrapper}
              key={item}
              type={item}
            ></ContentItem>
          );
        })}
        <div className={styles.toBeAdd}>{renderContent}</div>
      </>
    );
  };
  return isMobile ? (
    <div style={{ paddingBottom: "80px" }}>{renderChild()}</div>
  ) : (
    <ScrollWrapper>{renderChild}</ScrollWrapper>
  );
}

export default Index;
